<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="80%"
    title="选择生成规格"
    :style="{ top: '20px' }"
  >
    <div style="background-color: #ececec; padding: 20px">
      <a-row :gutter="20">
        <a-col :span="6" v-for="item in props.modelorList" :key="item.id">
          <a-card :bordered="false">
            <template #title>
              {{ item.name }}
            </template>
            <vxe-grid
              ref="grid"
              resizable
              show-overflow
              highlight-hover-row
              keep-source
              row-id="id"
              :height="tableData[item.id].length * 50"
              :data="tableData[item.id]"
              :columns="tableColumn[item.id]"
              :toolbar-config="toolbarConfig"
            >
              <!-- 工具栏 -->
              <template #toolbar_buttons> </template>
              <!-- 表格列默认内容 -->
              <template #property_default="{ row }">
                {{
                  props.modelorList
                    .find((p) => p.id === row.propertyId)
                    .items.find((i) => i.id === row.itemId).name
                }}
              </template>
              <!-- 表格列默认内容 -->
              <template #available_default="{ column, row }">
                <a-switch v-model:checked="row[column.field]" />
              </template>
            </vxe-grid>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <template #footer>
      <div class="form-modal-footer">
        <a-space>
          <a-button type="primary" html-type="submit" @click="confirm"> 确认 </a-button>
          <a-button @click="closeDialog">取消</a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
  import { getCurrentInstance, reactive, ref } from 'vue';

  defineOptions({
    name: 'SelectGenSpec',
  });

  // this对象
  const instance = getCurrentInstance();

  const emit = defineEmits(['confirm', 'close']);

  const visible = ref(false);

  const props = defineProps({
    modelorList: {
      type: Array,
      default: () => [],
    },
  });

  const propertyIds = ref([]);

  const tableData = ref({});

  // 表格列配置
  const tableColumn = ref({});

  const defaultColumns = ref([
    { field: 'available', title: '选择', width: 65, slots: { default: 'available_default' } },
  ]);

  // 工具栏配置
  const toolbarConfig = reactive({
    // 缩放
    zoom: false,
    // 自定义表头
    custom: false,
    // 右侧是否显示刷新按钮
    refresh: false,
    // 自定义左侧工具栏
    slots: {
      buttons: 'toolbar_buttons',
    },
  });

  const initTableColumn = () => {
    tableColumn.value = {};
    props.modelorList.forEach((property) => {
      tableColumn.value[property.id] = [];
      tableColumn.value[property.id].push({
        field: property.id,
        title: property.name,
        minWidth: 100,
        slots: { default: 'property_default' },
      });
      tableColumn.value[property.id].push(...defaultColumns.value);
    });
  };

  const initTableData = () => {
    tableData.value = {};
    props.modelorList.forEach((property) => {
      tableData.value[property.id] = [];
      property.items.forEach((item) => {
        tableData.value[property.id].push({
          propertyId: property.id,
          itemId: item.id,
          available: false,
        });
      });
    });
  };

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
    initTableColumn();
    initTableData();
  };

  // 关闭对话框
  const closeDialog = () => {
    visible.value = false;
    emit('close');
  };

  // 确认
  const confirm = () => {
    let sets = [];
    Object.keys(tableData.value).forEach((item) => {
      sets.push(tableData.value[item].filter((item) => item.available).map((i) => i.itemId));
    });
    emit('confirm', sets);
    closeDialog();
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
